<template>
<div>
  <form @submit.prevent="confirm">
  	账号：<input type="text" v-model="userInfo.account"><br/><br/>
  	密码：<input type="password" v-model="userInfo.password"><br/><br/>
  	年龄：<input type="number" v-model="userInfo.age"><br/><br/>
  	性别：
  	男<input type="radio"  name="sex" v-model="userInfo.sex" value="male">
  	女<input type="radio"  name="sex" v-model="userInfo.sex" value="female"><br/><br/>
  	爱好：
  	学习<input type="checkbox" v-model="userInfo.hobby" value="study">
  	打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
  	所在校区
  	<select v-model="userInfo.city">
  	  <option value="">请选择校区</option>
  	  <option value="beijing">北京</option>
  	  <option value="shanghai">上海</option>
  	  <option value="shenzhen">深圳</option>
  	  <option value="wuhan">武汉</option>
  	</select><br/><br/>
  	其它信息：
  	<textarea v-model="userInfo.other"/><br><br>
  	<input type="checkout" v-model="userInfo.agree">阅读并接受<a href="#">用户协议</a><br><br>
  	<button>提交</button>
  </form>
  <div>预览：{{userInfo}}</div>
</div>
</template>
<script>
export default{
  data(){
  	return {
  	  userInfo:{
  	  	  account:"",
  	  	  password:"",
  	  	  age:18,
  	  	  sex:"female",
  	  	  hobby:["study"],
  	  	  city:"beijing",
  	  	  other:"",
  	  	  agree:false,
  	  },
  	}
  },
  methods:{
  	confirm(){
  		alert(`提交注册请求 用户信息${JSON.stringify(this.userInfo)}`)
  	}
  }
}
</script>